<html>
    <head>
        <style type="text/css">
            #paper{width: 980px;height:1386px;padding-left: 44px;padding-right:44px;border-style: solid;}
            #daohang{position:relative;border-bottom-style: solid;border-bottom-color:#938e8c;
            border-block-end-width: 2px;}
            #daohang #lianjie{float:left;background-color: darkred;width: 110px;height:61px;}
            #lianjie a{text-decoration: none;color:#ffffff;position: absolute;bottom: 0;}
            #daohang #p{float: right;}
            #p div{position: absolute;right:0;bottom: 0;}
            .clear{border-style: none;clear: both;}
            #second{position: relative;margin-top: 40px;margin-bottom:44px;}
            #second #pic1{float:left;width: 641px;height:301px; border-style: solid;}
            #pic1 img{height: 100%;width:100%;margin-bottom: -301px;}
             #second #pic1 #fugai1{opacity:0.3; filter: alpha(opacity=30); background-color:#000; float:left;width:191px;height: 301px;}
            #second #pic1 #fugai2{opacity:0.3; filter: alpha(opacity=30); background-color:#000; float:right;width:191px;height: 301px;}
            #second #word1{float:right;width: 203px;height:301px;border-top-style: solid;border-top-color:#cc8091;
                border-block-end-width: 2px;}
            #word1 .text1{size:24px;color: #000000;text-decoration:underline;line-height: 10px;font-size:24px;
            font-family:Microsoft YaHei; }
            .text1:first-letter{font-size: 150%;}
            #text7{padding: 0;margin: 0;}
             #word1 #text2{font-size:12px;color: #676767;line-height: 10px;font-family:"楷体";margin-bottom: 0;}
             #word1 #text3{font-size:116px;color: #75b86b;font-family:Microsoft YaHei;font-style: italic;
             padding: 0;margin: 0;}
             #word1 #text4{float:left;font-size: 55px;color: #cc8091; font-family:Microsoft YaHei;padding:0;margin: 0;}
             #word1 #right-word{float: right;}
             #word1 #text5{font-size: 21px;color: #cc8091; font-family:Microsoft YaHei;padding-top:15%;margin: 0;}
              #word1 #text6{font-size:12px;color: #cc8091; font-family:Microsoft YaHei;padding: 0;margin: 0;}
            #paper #third{position:relative;width: 641px;box-sizing: border-box;}
            #paper #third #left-p{float:left;width: 230px;margin-right: 10px;}
            #paper .para{font-size: 12px;color:#767777;font-family:"Microsoft YaHei";line-height: 16px;}
            #paper #third #p1{font-size: 16px;color:#418c59;font-family:Microsoft YaHei;text-decoration:underline;font-weight: bold;}
            #paper #third #medium-p{float: left;width:200px;box-sizing: border-box;}
            #paper #third #p2{font-size: 16px;color:#d2994f;font-family:Microsoft YaHei;text-decoration:underline;font-weight: bold;}
             #paper #third .para2{font-size: 12px;color:#231815;font-family: "宋体";line-height: 16px;opacity:0.7; filter: alpha(opacity=70);}
            #paper #third #right-p{position:absolute;margin-left: 480px;}
            #paper #third #p3{font-size: 16px;color:#cc7680;font-family:Microsoft YaHei;text-decoration:underline;font-weight: bold;}
            #third .para2{margin:0;}
            #paper #third #right-p div p{font-size: 12px;}
            #paper #third #right-p div p span{font-style:italic;color:#cd4a48;font-family:"Microsoft YaHei";line-height: 16px;opacity:0.7; filter: alpha(opacity=70);}
            #paper #forth {position:relative;border-bottom-style: solid;border-bottom-color:#938e8c;
            border-block-end-width: 1px;}
            #paper #forth #f-1{float:left;width:415px; }
            #paper #forth #f-1 #f-top{border-bottom-style: solid;border-bottom-color:#11456b;
            border-block-end-width: 2px;}
            #forth #f-1 #t1{border-bottom-style: solid;font-family:"黑体";border-block-end-width: 2px;}
            #forth #f-1 .t1 {font-size: 42px;color:#11456b;font-family:"黑体";font-weight: bold;line-height: 16px;}
             #forth #f-1 .t1 #s1{font-size: 72px;color:#f5e327;font-family:"黑体";font-weight: bold;font-style:italic;}
            #forth #f-1 #s2{font-size: 33px;color:#11456b;font-family:"黑体";font-weight: bold;}
            #first-word{float:left;font-size: 70px;color:#f5e327;font-family:"Microsoft YaHei";
            }
            #forth-left #picture{float:right;width:160px;height: 230px;}
            #forth-left #picture img{width:100%;height: 100%;}
            #f-2{float:right;width:458px;}
            #f-2 #right-pic{position:relative;width:458px;height: 275px;}
            #f-2 #right-pic img{width:100%;height: 100%;margin-bottom: -61px;}
            #f-2 #right-pic #bottom-pic{float:bottom;width:458px;height: 61px;opacity:0.3; filter: alpha(opacity=30); background-color:#000;}
            #f-2 #right-pic #bottom-pic #right-t1{font-size: 26px;color:#ffffff;font-family:"Microsoft YaHei";border-left: solid;border-left-width:3px;
            border-color: #72b16a;height: 44px;margin-left:50px;padding-top: 10px;float: left;}
            #f-2 #right-pic #bottom-pic #right-t2{float:left;color: #72b16a;font-size: 12px;font-style:italic;padding-top: 18px;padding-left: 7px;}
            #right-bottom #ul-list{font-size: 16px;color: #5a5b5b;font-family: "黑体";line-height: 20px;}
             #right-bottom{position: relative;}
            #right-bottom #ul-list span{font-style: italic;font-size: 12px;}

            #f-2 #left-bottom{float:left;width:260px;height: 160px;background-color: #d45d5c;}
            #f-2 #left-bottom #zero{float:left;font-size: 110px;color:#ffffff;font-family:"Microsoft YaHei";height: 86px;
            border-right-color: #ffffff;border-right-width:2px;border-right-style: solid;margin-top: 25px;margin-bottom:25px;
            padding-left:5px;padding-right: 5px;margin-right: 15px;}
            #f-2 #left-bottom #one{float:left;padding:10px;margin-top: 25px;margin-bottom:25px;}
             #f-2 #left-bottom #one #one-1{font-style: italic;font-size: 21px;color: #ffffff;font-family: "黑体";line-height: 24px;padding-bottom: 0;margin: 0;}
             #f-2 #left-bottom #one #one-2{font-size: 12px;color: #ffffff;font-family: "黑体";line-height: 6px;}
             #f-2 #yinhao{float:left;width: 160px;margin-left:20px;font-size: 14px;color:#5a5b5b;font-family: "黑体";line-height: 16px;
             font-style:italic;}
             #f-2 #yinhao span{font-size: 72px;color:#d45d5c;font-family: "黑体";}
             #fifth a{float:right;text-align: 12px;font-family: "黑体";color: #d45d5c;text-decoration: none;}
            
        </style>
    </head>
    <body>
        <div id="paper">
            <div id="daohang">
                <div id="lianjie"><a href="">ife.baidu.com</a></div>
                <div id="p"><div>2016.3</div></div>
                <div class="clear"></div>
            </div>
            <div id="second">
               <div id="pic1">
                   <img src="u=2679938375,2346829602&fm=116&gp=0.jpg" />
                    <div id="fugai1"></div>
                    <div id="fugai2"></div>
               </div>
               <div id="word1">
                   <p class="text1">ABOUT</p>
                   <p class="text1" id="text7">TECHNOLOGE</p>
                   <P id="text2">about techologe about echologe techolo techologe echologe techolo
                   </P>
                   <p id="text3">700</p> 
                        <div id="text4">3.2</div>      
                        <div id="right-word">
                            <p id="text5">css</p>
                            <p id="text6">csscscccsssssffcssff</p>
                        </div>
               </div>
               <div class="clear"></div>
            </div>
            <div id="third">
                <div id="left-p">
                    <p id="p1">What</p>
                    <p class="para">para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                        para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                        para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                        para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip
                         para is a good dianlip </p>
                </div>
                 <div id="medium-p">
                    <p id="p2">When</p>
                    <p class="para2">para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                        para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                        para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                        para is a good para is a good dianlip para is a good dianlip para is a good dianlip</p>
                 </div>
                 <div id="right-p">
                    <p id="p3">How</p>
                    <p class="para2">para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                        para is a </p></br>
                    <div>
                    <p>What------<span>40%</span></p>
                    <p>What------<span>30%</span></p>
                    <p>What------<span>30%</span></p>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div id="forth">
                <div id="f-1">
                    <div id="f-top">
                        <p class="t1"><span id="s1">THE </span>TECOLOGE</p>
                        <p class="t1">OF FRONT</p>
                        <p id="s2">qian duan jishu ling yu </p>
                        <div class="clear"></div>
                    </div>
                    <div id="forth-left">
                        <div id="first-word">para</div>
                        <p class="para" id="forth-p">is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                            para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                            para is a good dianlip para <span id="picture"><img src="tulip_peach_blossom.jpg" /></span>
                            para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip
                            para is a good dianlips a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                            para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                            para is a good dianlip paras a good dianlip para is a good dianlip para </br>is a good dianlip para is a good dianlip 
                            para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip para is a good dianlip 
                            para is a good dianlip para  para is a good dianlip para  para is a good dianlip para para is a good dianlip
                             para is a good dianlip para para para is a good  para is a good dianlip para para is a good dianlip
                             para is a good dianlip para para para is a good dianlip para ra para para is a good dianli</p>
                    </div>
                </div>
                <div id="f-2">
                    <div id="right-pic">
                        <img src="tulip_ballade_s.jpg"/>
                        <div id="bottom-pic"><div id="right-t1">technologe front</div><div id="right-t2">technologe fronttechnologe front</div></div>
                    </div>
                    <div id="right-bottom">
                        <div id="ul-list">
                            <ul type="square">
                                <li>qianduanqianduandqianduananduandqianduan...............<span>qianduan</span></li>
                                <li>qianduanqianduandqanduandqianduan......................<span>qianduan</span></li>
                                <li>qianduanqianduandqianduananduandqianduan...............<span>qianduan</span></li>
                            </ul>
                        </div>
                        <div id="left-bottom"> 
                            <div id="zero">0</div>
                            <div id="one">
                                <p id="one-1">one two <br/>three four five</p>
                                <p id="one-2">hello everyone three four five</p>
                            </div>
                        </div>
                        <div id="yinhao"> 
                            <p><span id="1">"</span>It's a beautiful girl.have some good features,like love and kind.everyone love her.<span id="2">"</span></p>
                        </div>
                        <div class="clear"></div>
                    </div>      
                </div>
                <div class="clear"></div>
            </div>
            <div id="fifth">
                <a href="">ife.baidu.com</a>
            </div>
        </div>
    </body>
</html>